﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta  content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Trabajo HTML5 Responsive Template</title>
    <!-- Favicon -->
    <link rel="icon" href="/SWRW/public/assets/images/favicon.png" type="image/png" sizes="32x32">
    <!-- All CSS -->
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/aos.min.css">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/magnific.min.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/atom-one-light.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/select2.min.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/slimmenu.min.css">
    <link rel="stylesheet" href="/SWRW/public/assets/css/style.css">
    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
</head>
   <body>
      <!--header-start -->
      <header class="header-area">
         <div class="container">
            <div class="row">
               <div class="col-lg-2">
                  <div class="logo">
                     <a href="index.html"><img src="/SWRW/public/assets/images/logo.png" alt="image" /></a>
                  </div>
               </div>
               <div class="col-lg-10">
                  <div class="header-container d-flex justify-content-between highlight">
                     <nav class="highlight">
                        <ul id="responsive-menu" class="slimmenu">
                           <li><a class="nav-link" href="index.html">Home</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="about.html">About</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="#">Pages</a>
                              <ul>
                                 <li><a href="job-listing.html">Job listing</a></li>
                                 <li><a href="job-post.html">Job Details</a></li>
                                 <li><a href="submit.html">Submit Resume</a></li>
                                 <li><a href="post-job.html">Post Job</a></li>
                                 <li><a href="candidates.html">Candidates</a></li>
                                 <li><a href="companies.html">Companies</a></li>								 
                                 <li><a href="login.html">Login</a></li>
                                 <li><a href="reg.html">Register</a></li>
                                 <li><a href="style-guide.html">Style Guide</a></li>
                                 <li><a href="404.html">404 Page </a></li>
                              </ul>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="candidates.html">Candidates</a>
                           </li>
                           <li class="nav-item">
                              <a class="nav-link" href="blog-page.html">Blog</a>
                              <ul>
                                 <li><a href="blog-details.html">Blog Post</a></li>
                                 <li><a href="style-guide.html">Style Guide</a></li>
                              </ul>
                           </li>
                           <li class="nav-item"><a href="contact.html">Contact</a></li>
                           <li class="nav-item call-to-action "><a href="post-job.html">Post Job</a></li>
                        </ul>
                     </nav>
                  </div>
               </div>
            </div>
         </div>
      </header>
      <!--header-end -->
    <!--start header-banner -->
    <div class="header-banner clearfix" style="background-image:url(/SWRW/public/assets/images/header-bg.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="banner-text text-center">
                        <h1>Style Guide</h1>
                        <ul class="breadcumb list-inline">
							<li class="list-inline-item"><a href="index.html">Home</a></li>
							<li class="list-inline-item"><a href="style-guide.html">Style Guide</a></li>
						</ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end header-banner -->
    <!-- ======================== START BLOG AREA HERE ====================================== -->
    <div class="style-guide-area pt-100 pb-100 clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-8 mx-auto">
                    <div class="guide-wrapper">
                        <div class="style-details">
                            <div class="heading-1 mb-5">
                                <h1>H1 Heading</h1>
                                <p>Nec nullam justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas vel </p>
                            </div>
                            <div class="heading-2 mb-5">
                                <h2>H2 Heading</h2>
                                <p>Nec nullam justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas vel </p>
                            </div>
                            <div class="heading-3 mb-5">
                                <h3>H3 Heading</h3>
                                <p>Nec nullam justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas vel </p>
                            </div>
                            <div class="heading-4 mb-5">
                                <h4>H4 Heading</h4>
                                <p>Nec nullam justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas vel </p>
                            </div>
                            <div class="heading-5 mb-5">
                                <h5>H1 Heading</h5>
                                <p>Nec nullam justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas vel </p>
                            </div>
                            <div class="heading-6 mb-5">
                                <h6>H1 Heading</h6>
                                <p>Nec nullam justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas vel </p>
                            </div>
                            <div class="Unordered-list mb-5">
                                <h3>Unordered List</h3>
                                <p>justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas</p>
                                <ul>
                                    <li>wisi massa fermentum leo. </li>
                                    <li>phasellus nam pharetra. Imperdiet</li>
                                    <li>condimentum nunc magna,</li>
                                    <li>Facilisis egestas penatibus </li>
                                </ul>
                            </div>
                            <div class="ordered-list mb-5">
                                <h3>Ordered List</h3>
                                <p>justo sollicitudin suspendisse mauris dolor. Nec vitae wisi massa fermentum leo. Diam quam dui cubilia id sed pulvinar, egestas</p>
                                <ol>
                                    <li>wisi massa fermentum leo. </li>
                                    <li>phasellus nam pharetra. Imperdiet</li>
                                    <li>condimentum nunc magna,</li>
                                    <li>Facilisis egestas penatibus </li>
                                </ol>
                            </div>
                            <div class="blockquote mb-5">
                                <h3>Blockquote</h3>
                                <blockquote>
                                    <p>Rutrum quisque per sit feugiat nullam, non ante cras mauris ac porttitor, elit nibh aliquet maecenas arcu tortor, metus euismod semper libero, sodales venenatis convallis tempor adipiscing fusce. Tellus et placerat quisque consequat</p>
                                </blockquote>
                            </div>
                            <div class="highligting mb-5">
                                <h3>Code Highlighting</h3>
                                <span>Html</span>
                                <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- start widget --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"widget"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"widget-title"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Facebook<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"widget-content fb"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-comment">&lt;!-- end widget --&gt;</span>
</code></pre>
                                <span>Css</span>
                                <pre><code class="hljs css"><span class="hljs-selector-class">.comment-wrap</span> {
    <span class="hljs-attribute">background</span>: <span class="hljs-number">#fff</span>;
	<span class="hljs-attribute">padding</span>: <span class="hljs-number">1.5em</span> <span class="hljs-number">2em</span>;
	<span class="hljs-attribute">box-sizing</span>: border-box;
	<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">1.5em</span>;
}
</code></pre>
                                <span>Javascript</span>
                                <pre><code class="hljs javascript"><span class="hljs-keyword">var</span> x = <span class="hljs-number">5</span>;
<span class="hljs-keyword">var</span> y = <span class="hljs-number">2</span>;
<span class="hljs-keyword">var</span> z = x + y;
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"demo"</span>).innerHTML = z;
</code></pre>
                            </div>
                            <div class="youtube-video mb-5">
                                <h3>Youtube Video</h3>
                                
                            </div>
                            <div class="youtube-video mb-40">
                                <h3>Sound Cloud</h3>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================== START BLOG AREA HERE ====================================== -->
    <!--footer-area-start -->
      <footer>
         <div class="footer-area pt-100 pb-100 clearfix minus-30">
            <div class="container">
               <div class="row">
                  <div class="col-lg-3 col-md-3 col-sm-6">
                     <div class="footer-widget">
                        <div class="widget-title">
                           <a href="index.html"><img src="/SWRW/public/assets/images/footer-logo.png" alt="image" /></a>
                        </div>
                        <p>Cras semper auctor neque vitae tempus quam pellentesque nec nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget  </p>
                        <div class="social-link mt-4">
                           <ul>
                              <li class="facebook"><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                              <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
                              
                              <li class="linkedin"><a href="#"><i class="fa fa-linkedin" ></i></a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-3 col-sm-6">
                     <div class="footer-widget">
                        <div class="widget-title">
                           <h3>Candidates</h3>
                        </div>
                        <div class="widget-link">
                           <ul>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Browse Jobs</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Submit Resume</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>My Bookmarks</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Job Alerts</a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-3 col-sm-6">
                     <div class="footer-widget">
                        <div class="widget-title">
                           <h3>Employers</h3>
                        </div>
                        <div class="widget-link">
                           <ul>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Employers</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Add Job</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Jobs Listing</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Employers Grid</a></li>
                              <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Employer Listing</a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-3 col-sm-6">
                     <div class="footer-widget">
                        <div class="widget-title">
                           <h3>Subscribe Us</h3>
                        </div>
                        <div class="widget-text">
                           <form action="#">
                              <input type="email" placeholder="Your Email" />
                              <button type="submit" class="buttonfx curtainup">Subscribe</button>
                           </form>
                           <p>Nceptos, nulla dictumst neque nam aliquam</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="footer-bottom-area clearfix">
            <div class="container">
               <div class="row">
                  <div class="col-md-12">
                     <div class="footer-bottom text-center">
                        <p>&copy; Copyright - 2019 trabajo - Designed By <a href="http://www.jq22.com/">Themeix</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </footer>
      <!--footer-area-end -->
      <!-- ==================== START PRELOADER HERE ===================================== -->
      <div class="preloader" id="preloader">
         <div class="lds-ripple">
            <div></div>
            <div></div>
         </div>
      </div>
      <!-- ==================== END PRELOADER HERE ===================================== -->		
      <!-- ====================ALL JS FILE HERE===================================== -->
      <!-- jQuery -->
	  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
	  <script src="/SWRW/public/assets/js/modules/bootstrap.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/proper.js"></script>
	  <script src="/SWRW/public/assets/js/modules/jquery.waypoints.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/owl.carousel.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/magnific.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/typing.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/select2.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/highlight.pack.js"></script>
	  <script src="/SWRW/public/assets/js/modules/aos.min.js"></script>
	  <script src="/SWRW/public/assets/js/modules/slimmenu.min.js"></script>
	  
      <script src="/SWRW/public/assets/js/app.js"></script> 
	  
   </body>
</html>
